<template>
  <a-card :bordered="false">
    <component  @onEdit="onEdit"   @onGoBack="onGoBack" :is="currentComponet"  :record="record"></component>
  </a-card>
</template>

<script>
import ListItem from './ListItem'
import  Edit from  './Edit'
  export default {
    components: {
      ListItem,
      Edit
    },
    //--############  data() ###############-->
    data() {
      return {
        currentComponet: 'ListItem',
        record: ''
      }
    },

    methods:{
      onEdit(record){
        this.currentComponet='Edit';
        this.record = record
        console.log(this.record)
      },
     onGoBack(){
      this.currentComponet='ListItem';
    },

  },
    watch: {

      // '$route.path'() {
      //   this.record = ''
      //   this.currentComponet = 'List'
      // }
    }
  }
</script>
